<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-22 15:50:26
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-23 15:50:53
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-22 15:50:26
-->
<template>
  <div class="flex">
    <a-card title="基本用法">
      <a-checkbox value="1">Option 1</a-checkbox>
    </a-card>
    <a-card title="受控">
      <a-checkbox v-model="checked1">v-model</a-checkbox>
      <a-checkbox :model-value="true">binding value</a-checkbox>
      <a-checkbox :model-value="checked2">binding value2</a-checkbox>
      <a-checkbox :default-checked="true">uncontrolled state</a-checkbox>

      <div :style="{ marginTop: '20px' }">
        <a-button type="primary" @click="handleSetCheck">
          {{ checked2 ? "uncheck" : "check" }} value2
        </a-button>
      </div>
    </a-card>
    <a-card title="禁用">
      <a-checkbox value="1" disabled>Disabled Option 1</a-checkbox>
      <a-checkbox :default-checked="true" disabled
        >Disabled Option 2</a-checkbox
      >
    </a-card>
    <a-card title="复选框组">
      <a-checkbox-group>
        <a-checkbox value="1">Option 1</a-checkbox>
        <a-checkbox value="2">Option 2</a-checkbox>
        <a-checkbox value="3">Option 3</a-checkbox>
      </a-checkbox-group>
      <a-checkbox-group direction="vertical">
        <a-checkbox value="1">Option 1</a-checkbox>
        <a-checkbox value="2">Option 2</a-checkbox>
        <a-checkbox value="3">Option 3</a-checkbox>
      </a-checkbox-group>
    </a-card>
    <a-card title="复选框组选项">
      <a-checkbox-group v-model="value1" :options="plainOptions" />
      <a-checkbox-group v-model="value2" :options="options" />
      <a-checkbox-group v-model="value2" :options="options">
        <template #label="{ data }">
          <a-tag>{{ data.label }}</a-tag>
        </template>
      </a-checkbox-group>
    </a-card>
    <a-card title="限制可勾选数量">
      <a-checkbox-group v-model="value1" :max="2" :options="plainOptions" />
      <a-checkbox-group :max="2" :default-value="['1']">
        <a-checkbox value="1" disabled>Option 1</a-checkbox>
        <a-checkbox value="2">Option 2</a-checkbox>
        <a-checkbox>Option 3</a-checkbox>
        <a-checkbox>Option 4</a-checkbox>
      </a-checkbox-group>
    </a-card>

    <a-card title="全选">
      <a-checkbox
        :model-value="checkedAll"
        :indeterminate="indeterminate"
        @change="handleChangeAll"
        >Check All
      </a-checkbox>
      <a-checkbox-group v-model="data" @change="handleChange">
        <a-checkbox value="1">Option 1</a-checkbox>
        <a-checkbox value="2">Option 2</a-checkbox>
        <a-checkbox value="3">Option 3</a-checkbox>
      </a-checkbox-group>
    </a-card>

    <a-card title="自定义复选框">
      <a-checkbox-group :default-value="['1']">
        <a-checkbox value="1">
          <template #checkbox="{ checked }">
            <a-tag :checked="checked" checkable>This is a tag checkbox 1</a-tag>
          </template>
        </a-checkbox>
        <a-checkbox value="2">
          <template #checkbox="{ checked }">
            <a-tag :checked="checked" checkable>This is a tag checkbox 2</a-tag>
          </template>
        </a-checkbox>
        <a-checkbox value="3">
          <template #checkbox="{ checked }">
            <a-tag :checked="checked" checkable>This is a tag checkbox 3</a-tag>
          </template>
        </a-checkbox>
      </a-checkbox-group>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const checked1 = ref(false);
const checked2 = ref(false);

const value1 = ref(["Plain 1"]);
const plainOptions = ["Plain 1", "Plain 2", "Plain 3"];

const value2 = ref(["1"]);
const options = [
  { label: "Option 1", value: "1" },
  { label: "Option 2", value: "2" },
  { label: "Option 3", value: "3", disabled: true },
];

const handleSetCheck = () => {
  checked2.value = !checked2.value;
};

const indeterminate = ref(false);
const checkedAll = ref(false);
const data = ref([]);

const handleChangeAll = (value) => {
  indeterminate.value = false;
  if (value) {
    checkedAll.value = true;
    data.value = ["1", "2", "3"];
  } else {
    checkedAll.value = false;
    data.value = [];
  }
};

const handleChange = (values) => {
  if (values.length === 3) {
    checkedAll.value = true;
    indeterminate.value = false;
  } else if (values.length === 0) {
    checkedAll.value = false;
    indeterminate.value = false;
  } else {
    checkedAll.value = false;
    indeterminate.value = true;
  }
};
</script>
